<template>
  <div class="divBox">
    <el-card class="box-card" v-if="showForm">
      <div class="page_title">{{ $t('shouQuanZhengShuShenQing') }}</div>
      <div class="page_desc">
        {{ $t('tishi28') }}
      </div>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item :label="$t('qiYeMingCheng')" prop="company_name">
          <el-input v-model="form.company_name" :placeholder="$t('qingTianXieNinDeQiYeMingCheng')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('qiYeYuMing')" prop="domain_name">
          <el-input v-model="form.domain_name" :placeholder="$t('tishi29')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('dingDanHao')" prop="order_id">
          <el-input v-model="form.order_id" :placeholder="$t('tishi30')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('shouJiHao')" prop="phone">
          <el-input v-model="form.phone" :placeholder="$t('fuZeRenDianHua')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('shouQuanChanPin')">
          <el-input value="java" disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('yanZhengMa')" prop="captcha">
          <div class="captcha">
            <el-input
              ref="username"
              v-model="form.captcha"
              style="width: 218px"
              prefix-icon="el-icon-message"
              :placeholder="$t('yanZhengMa')"
              name="username"
              type="text"
              tabindex="3"
              autocomplete="on"
            />
            <div class="imgs" @click="getCaptcha()">
              <img :src="captchs" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">{{ $t('confirm') }}</el-button>
          <el-button @click="resetForm('form')">{{ $t('resets') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" v-else>
      <div class="page_title success">
        <span>{{ authHost }}</span>
        {{ $t('yuMingShouQuanChengGong') }}
      </div>
    </el-card>
  </div>
</template>

<script>
import { authCertSubmit, authCertQuery } from '@/api/authInformation';
import { configSaveUniq, configGetUniq } from '@/api/systemConfig';
import { Debounce } from '@/utils/validate';
export default {
  name: 'index',
  data() {
    return {
      form: {
        company_name: '',
        domain_name: '',
        order_id: '',
        captcha: '',
        phone: '',
        label: 22,
      },
      captchs: document.location.protocol,
      rules: {
        company_name: [{ required: true, message: this.$t('qingTianXieNinDeQiYeMingCheng'), trigger: 'blur' }],
        domain_name: [{ required: true, message: this.$t('qingShuRuYuMingGeShiBaiducom'), trigger: 'blur' }],
        order_id: [{ required: true, message: this.$t('qingShuRuNinGouMaiDeYuanMaDingDanHao'), trigger: 'blur' }],
        phone: [{ required: true, message: this.$t('qingShuRuFuZeRenDianHua'), trigger: 'blur' }],
        captcha: [{ required: true, message: this.$t('qingShuRuYanZhengMa'), trigger: 'blur' }],
      },
      authHost: '',
      showForm: true,
    };
  },
  mounted() {
    this.getCaptcha();
    this.getAuthQuery();
  },
  methods: {
    getCaptcha() {
      this.captchs = this.captchs + Date.parse(new Date());
    },
    submitForm: Debounce(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          authCertSubmit(this.form)
            .then((res) => {
              if (res.status === 200) {
                this.$modal.msgSuccess(res.msg);
                configSaveUniq({ key: 'authHost', value: this.form.domain_name });
              } else {
                this.getCaptcha();
                this.$modal.msgError(res.msg);
              }
            })
            .catch((res) => {
              this.getCaptcha();
              return this.$modal.msgError(res.msg);
            });
        } else {
          return false;
        }
      });
    }),
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAuthQuery() {
      configGetUniq({ key: 'authHost' }).then((data) => {
        this.authHost = data;
        authCertQuery({ host: data }).then((res) => {
          if (res.data.status == 1) {
            this.showForm = false;
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page_title {
  text-align: center;
  font-size: 30px;
  padding: 20px 0 20px;
}
.page_desc {
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
}
.captcha {
  display: flex;
  align-items: flex-start;
}
.imgs {
  margin-left: 20px;
  img {
    height: 36px;
  }
}
.success {
  color: #11a983;
}
</style>
